<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css" media="all" />
    <title>缴费记录</title>
</head>
<body>
<div style="width: 95%;height: 95%;margin: auto">
    <div>
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <lable class="layui-form-label">会计:</lable>
                    <div class="layui-input-inline">
                        <select id="userId">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">公司:</lable>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="compName" />
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">缴费日期:</lable>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" class="layui-input" id="minPayTime" />
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" class="layui-input" id="maxPayTime" />
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">缴费类型:</lable>
                    <div class="layui-input-inline">
                        <select id="type">
                            <option value="">请选择</option>
                            <option value="1">服务费</option>
                            <option value="2">年检费</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">审核状态:</lable>
                    <div class="layui-input-inline">
                        <select id="state">
                            <option value="">请选择</option>
                            <option value="1" >待审核</option>
                            <option value="2">审核通过</option>
                            <option value="3">审核不通过</option>
                        </select>
                    </div>
                </div>
                <button class="layui-btn layui-icon layui-icon-search" type="button" id="searchBtn">搜索</button>
                <button class="layui-btn layui-btn-primary layui-icon layui-icon-refresh-1" id="resetBtn" type="reset" >重置</button>
            </div>
        </form>
    </div>
    <hr class="layui-bg-green"/>
    <div>
        <table id="dataTable" lay-filter="dataTableFilter"/>
    </div>
</div>

<script type="text/html" id="headBtns">
</script>

<script type="text/html" id="rowBtns">
    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="check">
        <i class="layui-icon">&#xe63a;</i> 审核
    </button>
</script>

<script type="text/html" id="checkPayMentTpl">
    <div style="margin-top: 20px;margin-left: 20px">
        <form class="layui-form layui-form-pane" lay-filter="editFormFilter">
            <div class="layui-form-item" style="width: 320px;display: inline-block;float: left">
                <div class="layui-inline">
                    <label class="layui-form-label">客户名称</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="custName" readonly="readonly" >
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">缴费时间</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" lay-verify="required" lay-reqText="缴费时间不能为空"  readonly="readonly" id="payTime" name="payTime">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">缴费金额</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" lay-verify="required|number" lay-reqText="缴费金额不能为空" readonly="readonly"   name="payMoney">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">缴费类型</label>
                    <div class="layui-input-inline">
                        <select lay-filter="typeFilter" name="type">
                            <option value="">请选择</option>
                            <option value="1">服务费</option>
                            <option value="2">年检费</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item"   style="width:320px;display:inline-block">
                <div class="layui-inline">
                    <label class="layui-form-label">缴费凭证</label>
                    <div class="layui-input-inline">
                        <img id="payImg" style="width: 190px;height: 160px;border: 1px #eeeeee solid" />
                    </div>
                </div>
            </div>
            <%-- ---------------------------第一层----------------------------------%>
            <div class="layui-form-item" id="serviceDiv" style="display: none">
                <div class="layui-inline">
                    <label class="layui-form-label">服务始时间</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="serviceBeginTime" id="serviceBeginTime">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">服务止时间</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="serviceEndTime" id="serviceEndTime">
                    </div>
                </div>
            </div>
            <%------------------3333-----------------------------%>
            <div class="layui-form-item" >
                <div class="layui-inline">
                    <label class="layui-form-label">缴费方式</label>
                    <div class="layui-input-inline">
                        <select  name="payType"  readonly="readonly" lay-verify="required" lay-reqText="请选择缴费方式">
                            <option value="">请选择</option>
                            <option value="1">支付宝</option>
                            <option value="2">微信</option>
                            <option value="2">银行卡</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">流水号</label>
                    <div class="layui-input-inline">
                        <input class="layui-input"  readonly="readonly" name="payOrder" lay-verify="required" lay-reqText="请输入流水号">
                    </div>
                </div>
            </div>
            <%------------------44444444444444-----------------------------%>
            <div class="layui-form-item" >
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block" style="width: 515px;">
                    <textarea class="layui-textarea" name="info" readonly="readonly"></textarea>
                </div>
            </div>
            <div class="layui-form-item" >
                <div class="layui-inline">
                    <label class="layui-form-label">审核</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="state" value="2" title="通过" />
                        <input type="radio" name="state" value="3" title="不通过" />
                        </select>
                    </div>
                </div>
            </div>
            <button id="submitBtn" lay-submit lay-filter="submitBtnFilter" style="display: none"></button>
        </form>
    </div>
</script>

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>

<script>
    var $ = null;
    var layer = null;
    function showImg(e){
        var payImgPath = $(e).attr("payImg");
        layer.photos({
            photos:{
                "title": "收费凭证",
                "data": [
                    {
                        "alt": "收费凭证",
                        "src": payImgPath,
                    }
                ]
            },
           anim: 5
        });
    }

    layui.use(['table','jquery','layer','form','laydate'],function () {
        var table = layui.table;
        $ = layui.jquery;
        layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        laydate.render({elem:"#minPayTime"});
        laydate.render({elem:"#maxPayTime"});
        function getAccountings() {
            var data = null;
            $.ajax({
                url:"${pageContext.request.contextPath}/comp/user/getAccountings.do",
                async :false,
                success:function (rs) {
                    if(rs.code != 200){
                        layer.msg(rs.msg);
                        return false;
                    }
                    data = rs.data;
                }
            });
            return data;
        }

        function renderSelect(id,data) {
            var select = $(id);
            var html = "";
            $.each(data,function (index,value) {
                html = html + "<option value='"+value.id+"'>"+value.name+"</option>";
            })
            select.append(html);
            form.render("select");
        }

        function  initAccounting(id,param){
            var  data = getAccountings(param);
            renderSelect(id,data);
        }
        initAccounting("#userId");
        var t = table.render({
            id:"dataTableId",
            elem:"#dataTable",
            toolbar:'#headBtns',
            page:true,
            height: 450,
            url:'${pageContext.request.contextPath}/bussi/payment/page.do',
            response:{
                "statusCode": 200
            },
            parseData:function(rs){
                if (rs.code != 200){
                    layer.msg(rs.msg);
                    return false;
                }
                return {
                    "code": rs.code, //解析接口状态
                    "msg": rs.msg, //解析提示文本
                    "count": rs.data.count, //解析数据长度
                    "data": rs.data.data //解析数据列表
                }
            },
            cols:[[
                {type:'checkbox'},
                {field:'id',title:'ID'},
                {field:'custName',title:'公司名'},
                {field:'payTime',title:'缴费时间',width:110},
                {field:'type',title:'缴费类型',templet:function (d) {
                        if (d.type == 1){
                            return "<b style='color:green'  >服务费</b>";
                        }else if (d.type == 2){
                            return "<b style='color:red'>年检费</b>";
                        }else{
                            return "<b >其它</b>";
                        }
                    }
                },
                {field:'payMoney',title:'缴费金额(元)',width:120,templet:function (d) {
                        return d.payMoney / 100;
                    }
                },
                {field:'userName',title:'会计'},
                {field:'state',title:'状态',templet:function (d) {
                        if (d.state == 1){
                            return "<b style='color:gray'>待审核</b>";
                        }else if (d.state == 2){
                            return "<b style='color:green'>审核通过</b>";
                        }else if (d.state == 3){
                            return "<b style='color:red'>不通过</b>";
                        }
                    }
                },
                {field:'extData',title:'服务起止时间',width: 180,templet:function (d) {
                        var type = d.type;
                        if(type == 1){
                            var service = JSON.parse(d.extData);
                            return "<b style='color:gray'  >"+service.serviceBeginTime+"-"+service.serviceEndTime+"</b>";
                        }
                        return "";
                    }
                },
                {field:'payImg',title:'凭证',templet:function (d) {
                        return "<button type='button' class='layui-btn layui-btn-sm' payImg='/"+d.payImg+"' onclick='showImg(this)' >查看</button>";
                    }
                },
                {field:'createTime',title:'创建时间',width:110},
                {title:'操作',toolbar:'#rowBtns',width:100,fixed:"right"},
            ]],
        });

        $("#searchBtn").click(function () {
            var userId = $("#userId").val();
            var compName = $("#compName").val();
            laydate.render({elem:"#minPayTime"});
            laydate.render({elem:"#maxPayTime"});
            var type = $("#type").val();
            var state = $("#state").val();
            t.reload({
                where:{
                    userId:userId,
                    compName:compName,
                    minPayTime:minPayTime,
                    maxPayTime:maxPayTime,
                    type:type,
                    state:state,
                    page:1
                }
            });
        });

        table.on("tool(dataTableFilter)",function (d) {
            var event = d.event;
            if (event == 'check'){
                check(d.data);
            }
        })

        function check(data) {
            layer.open({
                title:'编辑',
                type:1,
                content:$("#checkPayMentTpl").html(),
                area:['690px','550px'],
                success:function (layero,index) {
                    $("#payImg").attr("src","/"+data.payImg);
                    data.payMoney = data.payMoney/100;
                    form.val("editFormFilter",data);
                    form.render();
                    form.on('submit(submitBtnFilter)',function (d) {
                        var state = d.field.state;
                        var id = data.id;
                        if(state != 2 && state != 3){
                            layer.msg("请输入审核状态！");
                            return false;
                        }
                        updateTable("bussi/payment/updateState.do",{id:id,state:state},index);
                        return false;
                    });
                },
                btn:['确认','取消'],
                btnAlign:'c',
                yes:function (index,layero) {
                    $("#submitBtn").click();
                }
            })
        }

        function  updateTable(url,data,index) {
            $.post("${pageContext.request.contextPath}/"+url,data,function (rs) {
                if (rs.code != 200){
                    layer.msg(rs.msg);
                    return false;
                }
                layer.msg(rs.msg);
                $("#searchBtn").click();
                layer.close(index);
            });
        }

    })
</script>

</body>
</html>
